/*----------------------------------------*\
  SECTION
\*----------------------------------------*/

.section {
  @apply w-full;
}

/*
  If section has --default or has background color,
  we add padding top:
*/
.section--default,
.section[class^='bg--'],
.section[class*=' bg--'] {
  @apply container--py;
}

.section--py-half {
  @apply container--py-half;
}

.section--py {
  @apply container--py;
}

/*
  If consecutive sections have same background,
  we remove the padding top of the second section:
*/
.hero + .section--default,
.hero + .section--py,
.hero + .bg--white,
.section--default + .section--default,
.section--default + .section--py,
.section--py-half + .section--default,
.section--py + .section--default,
.bg--white + .bg--white,
.bg--secondary-900 + .bg--secondary-900,
.bg--secondary-800 + .bg--secondary-800,
.bg--secondary-700 + .bg--secondary-700,
.bg--secondary-600 + .bg--secondary-600,
.bg--secondary-500 + .bg--secondary-500,
.bg--secondary-400 + .bg--secondary-400,
.bg--secondary-300 + .bg--secondary-300,
.bg--secondary-200 + .bg--secondary-200,
.bg--secondary-100 + .bg--secondary-100,
.bg--secondary-50 + .bg--secondary-50 {
  @apply container--pb;
}

.section__title {
  @apply text--bold text--2xl;
  @apply pb-10;
}

.section__title--negative,
.bg--secondary-900 .section__title,
.bg--secondary-800 .section__title,
.bg--secondary-700 .section__title,
.bg--secondary-600 .section__title,
.bg--secondary-500 .section__title,
.bg--secondary-900 .section__subtitle,
.bg--secondary-800 .section__subtitle,
.bg--secondary-700 .section__subtitle,
.bg--secondary-600 .section__subtitle,
.bg--secondary-500 .section__subtitle {
  @apply text-white;
}

.bg--secondary-900 .section__action .btn,
.bg--secondary-800 .section__action .btn,
.bg--secondary-700 .section__action .btn,
.bg--secondary-600 .section__action .btn,
.bg--secondary-500 .section__action .btn {
  @apply btn--bare-negative;
}

.section__subtitle {
  @apply text--bold text--lg;
  @apply pb-10;

  .grid + & {
    @apply pt-12 lg:pt-16 3xl:pt-20;
  }
}

.section__action {
  @apply flex justify-end;
  @apply pt-4;
  @apply relative top-6 lg:top-8 3xl:top-12;
}

.carousel + .section__action {
  @apply pt-0;
}

.section-full-height {
  @apply h-full;
}

.section-overview {
  @apply w-full;
  @apply h-full;
  @apply bg-secondary-50;
  @apply pb-28;
  @apply pt-4;
}
